<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="box">box1</div>
  <div>box2</div>
  <div>box3</div>
  <div>box4</div>
  <div></div>
  <div>
    <p>噢噢噢噢</p>
  </div>
  <script>
    // jquery 是类库
    console.dir($)
    console.log($ === jQuery)

    // $是一个类，但是在ES6以前没有类的概念，所以使用构造函数，因此$就是一个构造函数
    // new $()得到实例，但是jquery会自动帮我们完成new的动作，我们只需要调用$()即可
    // 获取到box的jquery对象，他是对原生对象的一层封装，我们操作对象就要使用jquery提供的方法，而不能使用原生的了
    console.log($('#box'))
    // 获取一个jquery对象，里面放了四个原生对象div
    console.log($('div'))
    // 一般jquery对象不需要使用变量来存，除非一个对象要反复使用很多次，一般变量名以$开头
    var $div = $('div')

    // jquery对象转成原生对象
    // 1、使用中括号索引
    console.log($div[0])
    // 2、get
    console.log($div.get(1))

    // 原生对象转jquery对象，就用$，传入原生对象
    var divs = document.querySelectorAll('div')
    console.log($(divs))

    console.log($('div:not(#box)'))
    console.log($('div:odd'))
    console.log($('div:eq(2)'))
    console.log($('div:contains(2)'))
    console.log($('div:empty'))
    console.log($('div:has(p)'))
    console.log($('div:parent')) // 和:empty是相反



  </script>
</body>
</html>